<!--
 * @Author: zhangmengqiong
 * @Date: 2021-04-21 16:26:23
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-04-26 10:23:35
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>D3</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <p>vue</p>
    <p>react</p>
    <p>agular</p>
    <button id="datum">datum</button>
    <!-- 对整体数据源进行更新 -->
    <button id="data">data</button>
  </body>
  <script>
    // 这个body 是d3里面的document,并不是浏览器里面的document
    const body = d3.select('body');
    // 获取body 所有的p标签
    const p = body.selectAll('p');
    function doDatum() {
      const str = 'Violet';
      p.datum(str);
      p.text(function (d, i) {
        console.log(d, i);
        return `${d}-${i}`;
      });
    }
    function doData() {
      const dataSet = ['Vue', 'React', 'Agular'];
      p.data(dataSet).text(function (d, i) {
        return `${d}-${i}`;
      });
    }
    document.getElementById('datum').addEventListener('click', function (e) {
      doDatum();
    });
    document.getElementById('data').addEventListener('click', function (e) {
      doData();
    });
  </script>
</html>
